<template>
    <div class="goods-contain">
        <goods-item v-for="item in goodsList" :goodsInfo="item" :key="item.id"/>
    </div>
</template>

<script>
    import GoodsItem from "./goodsItem";

    export default {
        name: "goods",
        props: {
            goodsList: {
                type: Array,
                default: function () {
                    return []
                },
                required: true
            }
        },
        components: {GoodsItem}
    }
</script>

<style lang="less">
    .goods-contain {
        margin: 0 auto;
        width: 1000px;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .goodsItem-contain {
            margin: 10px;
        }
    }
</style>